<template>
	<view class="content">
		<view class="topBar f-c-c f30">
			<view class="arrowLeft" @click="$back(1)">
				<u-icon size="40" name="arrow-left"></u-icon>
			</view>
			<view class="fw">{{topBarTitle}}</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">商品名称</view>
			<view @click="toEditName" v-show="nameFlag">{{product.name}}</view>
			<view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="product.name" />
			</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">商品分类</view>
			<view @click="toEditName">{{product.classification.name}}</view>
			<!-- <view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="product.classification.name" />
			</view> -->
		</view>
		
		<view class="item f-c-b">
			<view class="fw">商品图片</view>
			<view class="f-c-c" @click="toChooseImg">
				<image style="width: 80rpx;border-radius: 10rpx;" :src="$u.baseUrl+product.imgs" mode="widthFix"></image>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">商品价格</view>
			<view @click="toEditName" v-show="nameFlag">{{product.price}}</view>
			<view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="product.price" />
			</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">商品库存</view>
			<view @click="toEditName" v-show="nameFlag">{{product.count}}</view>
			<view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="product.count" />
			</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">联系方式</view>
			<view @click="toEditName" v-show="nameFlag">{{product.gphone}}</view>
			<view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="product.gphone" />
			</view>
		</view>
		
		<view class="item f-c-b">
			<view class="fw">是否7天无理由退换货</view>
			<view style="margin-right: -30rpx;">
				<u-checkbox v-model="checked" shape="square"></u-checkbox>
			</view>
		</view>
		
		<view class="item ">
			<view class="fw">商品简介</view>
			<view class="textareaBox">
				<textarea class="textarea" v-model="product.introduce" placeholder="此处填写商品简介" placeholder-class="plac"/>
			</view>
		</view>
		
		<view @click="toSub" class="btn f-c-c cw">
			确认
		</view>
		
	</view>
	</view>
</template>

<script>
	import uploadImg from '../../utils/uploadImg/index.js'
	export default {
		data() {
			return {
				nameFlag:false,
				// name:"红木",
				// price:200,
				// stock:300,
				// phone:14356565656,
				// url:'../../static/index/img_sp.png',
				checked:true,
				topBarTitle:'',
				product:{}
			}
		},
		onLoad(e) {
			this.topBarTitle=e.title
			console.log(e);
			this.editGoods(e.goodId)
		},
		methods: {
			async editGoods(goodId){
				const res=await this.$u.api.editGoods({
					goods:goodId
				})
				res.success?this.product=res.data:this.$u.toast(res.msg)
				this.checked=this.product.isbreak==1?true:false
				console.log(this.product);
				
			},
			toEditName() {
				this.nameFlag = false
				this.$refs.inp.focus=true
			},
			async toChooseImg(){
				/* 1. 上传图片，获得转换好的地址 */
				const res = await uploadImg(this.$u.api.fileUpLoad, 1)
				console.log(this.$u.baseUrl+res[0]);
				this.product.imgs=res[0]
			},
			async toSub(){
				console.log(this.product);
				console.log(this.checked);
				const res=await this.$u.api.updateGoods({
					goods:this.product.id,
					count:this.product.count,
					gphone:this.product.gphone,
					imgs:this.product.imgs,
					introduce:this.product.introduce,
					isbreak:this.checked?'1':'2',
					name:this.product.name,
					price:this.product.price
				})
				this.$back(1)
			}
		}
	}
</script>

<style>
	.topBar {
		height: 80rpx;
	}
	
	.arrowLeft {
		position: absolute;
		left: 20rpx;
	}
	
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}
	.item{
		background-color: #FFFFFF;
		padding:30rpx 20rpx;
		margin-top: 3rpx;
	}
	.inputName {
		width: 220rpx;
		text-align: right;
	}
	.inputName input{
		font-size: 30rpx;
	}
	.textareaBox{
		background-color: #EEEEEE;
		width: 100%;
		margin: 20rpx 0;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.textarea{
		padding: 20rpx;
		width: 94%;
		height: 150rpx;
	}
	.plac{
		font-size: 30rpx;
	}
	.btn{
		background-color: #FF8710;
		margin: 0rpx 40rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
	}
</style>
